<template>
	<view class="info-page">
		<nav-bar :title="title"></nav-bar>
		<tabPages :Template="templateId" :Type="type"></tabPages>
	</view>
</template>

<script>
	import tabPages from '../components/tabPages'
	export default {
		name: 'tabPage',
		components: {
			tabPages
		},
		data() {
			return {
				templateId: '',
				title: '',
				type: ''
			}
		},
		onLoad(options) {
			this.getTemplateId(options.id)
			if (options.id == 1) {
				this.title = '装修改造'
				this.type = 7
			} else if (options.id == 2) {
				this.title = '个人团购'
				this.type = 1
			} else if (options.id == 3) {
				this.title = '装企直供'
				this.type = 3
			} else if (options.id == 4) {
				this.title = '阳光采购'
				this.type = 4
			} else if (options.id == 5) {
				this.title = '全屋定制'
				this.type = 6
			} else if (options.id == 6) {
				this.title = '门窗系统'
				this.type = 5
			} else if (options.id == 7) {
				this.title = '家庭维修'
				this.type = 8
			} else if (options.id == 8) {
				this.title = '工长直采'
				this.type = 2
			}
		},

		methods: {
			async getTemplateId(id) {
				this.templateId = id
			},
			async submitAll() {
				const data = {
					name: this.name,
					phone: this.phone,
					need: this.need,
					company: this.company,
					address: this.address,
					remark: this.remark,
					type: this.type
				}
				const res = await this.$POST('/system/consult', data)
			}
		}
	}
</script>
<style lang="scss">
	button {
		padding: 0 !important;
	}
	.info-page {
		// height: 100vh;
		background-color: #F0F3F5;

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			// margin-bottom: 2rpx;
			border-bottom: 1px solid #F0F3F5;
			background-color: #FFF;

			.label {
				font-size: 28rpx;
				font-weight: 500;
				color: #000;
			}

			.value-box {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				color: #808080;

				.value {
					margin-right: 16rpx;
					text-align: right;
				}

				.img-box {
					width: 100rpx;
					height: 100rpx;
					margin-right: 16rpx;
					border-radius: 50rpx;
					overflow: hidden;

					.user-photo {
						width: 100%;
						height: 100%;
						// background-color: #126352;
					}
				}
			}
		}
	}

	.input-img-box {
		position: relative;
		width: 186rpx;
		height: 186rpx;
		margin-right: 16rpx;
		border-radius: 16rpx;

		.user-photo {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}

		.close-icon {
			position: absolute;
			right: -12rpx;
			top: -12rpx;
		}
	}

	.input-content {
		padding: 0 30rpx 30rpx;
		display: flex;
		justify-content: center;
	}

	.uni-file-picker__container {
		display: flex;
		justify-content: center;
	}

	.file-picker__box-content {
		flex-direction: column;
	}

	.icon-del-box {
		width: 36rpx !important;
		height: 36rpx !important;
	}

	.icon-del {
		width: 20rpx !important;
	}
</style>